Question

我正在尝试使用下拉菜单构建一个简单的CSS导航栏，我是CSS的新手，我很难让我的下拉菜单工作。我的下拉菜单中的主要问题是我的子菜单与主菜单的大小不同。我的一个子菜单的工作另一个不起作用？

  ---- HTML CODE ---

  <nav id = "navigation" role:navigation>

                <img src="logo_dark.png" id = "logo" />
                <ul id="menu">

                    <li id="intresting_stuff">
                        <a href = "#" >
                                Interesting Stuff
                                <ul class="sub_menu" id="sub_menu">
                                <li id="classic"><a href = "#">Science</a></li>
                                <li id="strategy"><a href = "#">Technology</a></li>
                                <li id="sports"><a href = "#">Comedy</a></li>

                                </ul>
                        </a>
                    </li>
                    <li id="games">
                        <a href = "#" >
                                Games
                                <ul class="sub_menu" id="sub_menu">
                                <li id="classic"><a href = "#">Classic Games</a></li>
                                <li id="strategy"><a href = "#">Strategy Games</a></li>
                                <li id="sports"><a href = "#">Sports Games</a></li>
                            <li id="adventure"><a href = "#">Adventure Games</a></li>
                                <li id="random"><a href = "#">Random Games</a></li>
                        </ul>
                        </a>
                    </li>
                    <li id="home">
                        <a href = "#" >
                                Homes                                   
                                <span>

                                </span>
                        </a>
                    </li>
                </ul>

              </nav>



----- CSS CODE -----

#navigation
{

display:block;
background: linear-gradient(to bottom, rgba(0,81,222,0.9)0,rgba(212,212,212,0.15)100%);
color: white;
width : 100%;
height:100%;
border-radius:5px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
 box-shadow: 0 8px 6px -6px black;

}
#navigation  li a
{
display:inline-block; makes the list go from left to right
list-style: none;
padding-top:15px;
padding-bottom:15px;
padding-left:23px;
padding-right:23px;
float: right;
font-family: 'Oswald', sans-serif; 
font-style:bold;
font-size: 20px;
color: white;
text-decoration: none;


}

/*This is the stuff for the drop down menu..*/

/*Initialize*/
ul#menu, ul#menu ul.sub_menu {
float:right;
display: flex;// alows the website to flex if necessary
flex-wrap: wrap;
justify-content: flex-start;
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 ul.sub_menu li a {
text-decoration: none;
color: #fff;
background: linear-gradient(tobottom,rgba(201,198,189,.5)0,rgba(212,212,212,0.15)100%);
padding:0px;
display:inline-block;
text-align:center;
font-size:19px;
width: 100%;
}
#intresting_stuff
{
border-left: 1px solid gray;
}
#games
{
border-left: 1px solid gray;
border-right: 1px solid gray;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
float:right;
}
/*sub menu*/
ul#menu li ul.sub_menu {

margin:0;
padding:0;
display:none;
position: absolute;
top: 30px;
left: 0;


}
#classic:hover, #strategy:hover, #sports:hover, #adventure:hover,#random:hover
 {
background:linear-gradient(to bottom, rgba(222,152,0,0.8) 0,rgba(212,212,212,0.4)100%);


}
#science:hover, #technology:hover, #comedy:hover
{
background:linear-gradient(to bottom, rgba(222,152,0,0.8) 0,rgba(212,212,212,0.4)100%);


}
#games:hover, #intresting_stuff:hover, #home:hover
{
background:linear-gradient(to bottom, rgba(222,152,0,0.8) 0,rgba(212,212,212,0.4)100%);

}

ul#menu li:hover ul.sub_menu {
display:block;


}

Answer 1

您的代码非常混乱，<a>中有一些随机<ul>标记。我把你的代码放在一个jsfiddle中，我想我明白你要做什么。

你的很多问题都围绕着在同一个div中左右浮动......

查看HERE，了解可以复制和粘贴的有效解决方案。具体来说，请注意悬停元素和visibility: visible;类属性的使用。

如何使子菜单与父菜单的宽度相同？

1 个答案: