Question

我正在尝试设置导航的下拉级别（例如，增加下拉列表的宽度），但无法找到要更改的相关选择器。该网站为http://www.mattmaclennan.co.uk/a2

示例：在“新摩托车”下拉列表中，我想增加宽度，然后将翻转元素移到侧面

我知道要使用的代码，但我找不到相关的选择器来执行它。把头发撕掉了！

提前感谢您的任何建议！

Answer 1

<nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">New Motorcycles</a>
        <ul>
            <li><a href="#">Adventure</a></li>
            <li><a href="#">125cc</a></li>
            <li><a href="#">foofoo</a>
                <ul>
                    <li><a href="#">subsub</a></li>
                    <li><a href="#">subsub2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Used motorcycles</a>
        <ul>
            <li><a href="#">Motor 1</a></li>
            <li><a href="#">Motor 2</a></li>
        </ul>
    </li>
    <li><a href="#">etc</a></li>
</ul>

它的基本下拉，所以你必须自己做一点造型。但这里是css

body {    
font-family: Helvetica, sans-serif;
font-size: 14px;
line-height: 10px;
}

nav ul ul {
display: none;
}
nav ul li:hover > ul {
    display: block;
}


nav ul {
     background: red; 
     list-style: none;
     position: relative;
    display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}

nav ul li {
    float: left;

}
    nav ul li:hover {
        background: black;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block;
        padding: 25px 20px;
        color: #fff;
        text-decoration: none;

    }


nav ul ul {
    background: red;
    padding: 0;
    position: absolute;
    top: 100%;
}
    nav ul ul li {
        float: none;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 20px;
            color: #fff;
        }    
            nav ul ul li a:hover {
                background: #000;
            }

nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}

你可以看到没有使用过类或id。

样式下拉菜单元素

1 个答案: