徽标CSS和HTML旁边的自适应下拉菜单导航位置

Question

I have a problem and its been killing me, been following various tutorials to create my navigation bar for my website but cant seem to get it right. The problem i have is that i cant position my navigation to be next to my logo when the screen is large. Everytime i shrink it down then click my menu button it appears in the same position as the last screen so im unable to see it.

Any help from experiance users will be much appreciated, the CSS & HTML i have is below.

 /*Strip the ul of padding and list styling*/ ul { list-style-type:none; margin:0; padding:0; position: fixed; } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } /*Hover state for top level links*/ li:hover a { background: #19c589; } /*Style for dropdown links*/ li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ li:hover ul a:hover { background: #19c589; color: #fff; } /*Hide dropdown links until they are needed*/ li ul { display: none; } /*Make dropdown links vertical*/ li ul li { display: block; float: none; } /*Prevent text wrapping*/ li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ ul li a:hover + .hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ input[type=checkbox]{ display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ display: block; } /*Responsive Styles*/ @media screen and (max-width : 760px){ /*Make dropdown links appear inline*/ ul { position: static; display: none; } /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; } } #nav_wrapper{ } #logo img{ max-width: 100%; height: auto; } #nav{ background-color: #222; width: 100%; top:0px; left:0px } 

 <div id="pageWrapper"> <!-- page wrapper--> <div id="nav"> <!-- nav--> <div id="logo"> <img src="http://placehold.it/350x150" width="405" height="96" align="bottom" /></div> <div id="nav_wrapper"> <!-- nav wrapper--> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">About ￬</a> <ul class="hidden"> <li><a href="#">Who We Are</a></li> <li><a href="#">What We Do</a></li> </ul> </li> <li> <a href="#">Portfolio ￬</a> <ul class="hidden"> <li><a href="#">Photography</a></li> <li><a href="#">Web & User Interface Design</a></li> <li><a href="#">Illustration</a></li> </ul> </li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end of nav wrapper--> </div> <!-- end of nav--> </div> <!-- end of page wrapper--> 

Answer 1

1st of all you have to remove the max-width for the logo and the auto height as well, also you'll need to float the image container "DIV" to the left to float the navigation menu to its right, so you will need to do it like the following

CSS:

#nav_wrapper{
   overflow:auto;
}  

#logo img{
   float:left;
}

the rest will be the same :)

Answer 2

Follow these steps:

1. remove position: fixed; from your ul
2. use float: left on logo .
3. use float: right on nav .

code:

#logo {
    float: left;
}

#nav_wrapper {
    float: right;
}

and for smaller resolution:

@media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
}

 #logo { float: left; } #nav_wrapper { float: right; } /*Strip the ul of padding and list styling*/ ul { list-style-type:none; margin:0; padding:0; } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } /*Hover state for top level links*/ li:hover a { background: #19c589; } /*Style for dropdown links*/ li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ li:hover ul a:hover { background: #19c589; color: #fff; } /*Hide dropdown links until they are needed*/ li ul { display: none; } /*Make dropdown links vertical*/ li ul li { display: block; float: none; } /*Prevent text wrapping*/ li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ ul li a:hover + .hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ input[type=checkbox]{ display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ display: block; } /*Responsive Styles*/ @media screen and (max-width : 760px){ #logo, #nav_wrapper { float: none; } /*Make dropdown links appear inline*/ ul { position: static; display: none; } /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; } } #nav_wrapper{ } #logo img{ max-width: 100%; height: auto; } #nav{ background-color: #222; width: 100%; top:0px; left:0px } 

 <div id="pageWrapper"> <!-- page wrapper--> <div id="nav"> <!-- nav--> <div id="logo"> <img src="http://placehold.it/350x150" width="405" height="96" align="bottom" /></div> <div id="nav_wrapper"> <!-- nav wrapper--> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">About ￬</a> <ul class="hidden"> <li><a href="#">Who We Are</a></li> <li><a href="#">What We Do</a></li> </ul> </li> <li> <a href="#">Portfolio ￬</a> <ul class="hidden"> <li><a href="#">Photography</a></li> <li><a href="#">Web & User Interface Design</a></li> <li><a href="#">Illustration</a></li> </ul> </li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end of nav wrapper--> </div> <!-- end of nav--> </div> <!-- end of page wrapper-->