Question

我正在尝试创建自己的Dropdown菜单栏。首先，我创建了带Tabs的菜单栏并在其中添加了一些CSS效果。现在我想添加子菜单，它应该在特定栏或Tab上的MouseHover上可见但是不能这样做..

这是HTML ..

<ul id="dropdown_nav">
    <li>
        <a class="first" href="#" style="font-size: 12px; margin-left: 165px;">Home</a>
    </li>
    <li>
        <a href="#" style="font-size: 12px;">Tutorials</a>
    </li>
    <li>
        <a href="#" style="font-size: 12px;">Artciles</a>
    </li>
    <li>
        <a href="#" style="font-size: 12px;">Freebies</a>
    </li>
    <li>
        <a class="last" href="#" style="font-size: 12px;">Other Stuff</a>
    </li>
</ul>

这是CSS ..

a {
    color:#525252;
    text-decoration:none;
}
#dropdown_nav {
    height: 35px;
    margin:0;
    padding:0;
    width:100%;
    padding:0px;
    display:inline-block;
    list-style:none;
    -moz-box-shadow:inset 0px 0px 1px #fff;
    -webkit-box-shadow:inset 0px 0px 1px #fff;
    border:1px solid #ccc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background: lightgray;
}
#dropdown_nav li {
    padding-top: 4px;
    float:left;
    position:relative;
    display:inline-block;
}
#dropdown_nav li a {
    padding:12px 45px 10px 45px;
    border-right:1px solid #ccc;
}
#dropdown_nav li a:hover {
    background:#00a1e4;
    color: white;
}

Answer 1

这是我的看法。我试着保留你原来的设计。

    <div id="dropdown_nav">
<ul>
    <li>
        <a class="first" href="#">Home</a>
    </li>
    <li>
        <a href="#">Tutorials</a>
        <ul>
            <li><a href="">Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Artciles</a>
    </li>
    <li>
        <a href="#">Freebies</a>
    </li>
    <li>
        <a href="#">Other Stuff</a>
    </li>
</ul>
</div>

CSS：

#dropdown_nav {
margin: 0px auto; 
text-align: center;
    font-family: arial;
    font-size: 12px;
}

#dropdown_nav ul ul {
display: none;
}

#dropdown_nav ul li:hover > ul {
display: block;
}


#dropdown_nav ul {
background: #D3D3D3;   
padding: 0px 5px;
margin: 0;
line-height: 24px;  
list-style: none;
position: relative;
display: block;
}
#dropdown_nav ul:after {
content: ""; clear: both; display: block;
}

#dropdown_nav ul li {
float: left;
display: block;
}
#dropdown_nav ul li:hover {
background: #00A1E4;

}
#dropdown_nav ul li:hover a {
    color: #fff;
}

#dropdown_nav ul li a {
display: block; padding: 10px 10px ; 
color: #000; text-decoration: none;

}


#dropdown_nav ul ul {
background: #235B93; border-radius: 0px; 
position: absolute; top: 100%; z-index:10;

}
#dropdown_nav ul ul li {
float: none; 
border-top: 1px solid #235B93;
border-bottom: 1px solid #3075BA; position: relative;
    left: 0px; position: relative; 

}
#dropdown_nav ul ul li a {
    color: #fff; 
    display: block;  
}   
#dropdown_nav ul ul li a:hover {
background: #3075BA;
display: block-table;
padding: 10px
}
#dropdown_nav ul li ul li:hover ul li {
    display: block !important;
    width: 200px;

}

#dropdown_nav ul ul ul {
position: absolute; left: 100%; top:0;
z-index:10; 
}

这是Jsfiddle

Answer 2

您可以从以下代码和演示链接中获取灵感。您可以从源链接中获得正确的解释

HTML：

<ul id="menu">
    <li> <a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li> <a href="#">Sub Menu 1</a>

            </li>
            <li> <a href="#">Sub Menu 2</a>

            </li>
            <li> <a href="#">Sub Menu 3</a>

            </li>
            <li> <a href="#">Sub Menu 4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li> <a href="#">Sub Menu 1</a>

            </li>
            <li> <a href="#">Sub Menu 2</a>

            </li>
            <li> <a href="#">Sub Menu 3</a>

            </li>
            <li> <a href="#">Sub Menu 4</a>

            </li>
        </ul>
    </li>
    <li> <a href="#">Menu 5</a>

    </li>
</ul>

CSS：

**/*Initialize*/
 ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
 ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
 ul#menu li {
    position: relative;
}
/*sub menu*/
 ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/152

来源：http://code-tricks.com/simple-css-drop-down-menu/

Answer 3

您可以随时使用display：hide，当您悬停菜单项时，下拉菜单显示可见。如果你不理解我会让你成为一个小提琴

Answer 4

检查此代码，它只是从您的代码中提取的概念。如果这是您正在寻找的，请告诉我：

CSS：

ul.nav {height: 30px}
  ul.nav > li {float: left; position: relative; list-style: none}
    ul.nav > li > a {padding: 0 20px; display: block; height: 30px; line-height: 30px}

  ul.nav ul {position: absolute; top: 30px; left: 0; width: 200px; display: none}
    ul.nav ul li {}
      ul.nav ul li a {}

  ul.nav > li:hover ul {display: block}

HTML：

<ul class="nav">
  <li><a href="">Home</a></li>
  <li><a href="">Tutorials</a>
    <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
    </ul>
  </li>
  <li><a href="">Artciles</a></li>
  <li><a href="">Freebies</a></li>
  <li><a href="">Other Stuff</a></li>
</ul>

你可以在这里看到小提琴：http://jsfiddle.net/thePav/cpss3/1/

如何使用CSS创建下拉菜单栏

4 个答案: