<div id="nav">
<ul id="rightMin">
<li id="selectedmenu" onclick="location.href='index.php'">main</li>
<li onclick="location.href='aboutus.php'">about</li>
<li>contact us</li>
</ul>
</div>
CSS:
#selectedmenu {
display:inline;
float:right;
/*padding: 2px 7px 0px 7px;*/
height: 35px;
background: url('../images/selected.png') repeat-x;
cursor: pointer;
text-align: center;
line-height:35px;
padding: 0 5px 0 5px;
color: white;
}
div#nav ul li {
display:inline;
float:right;
/*padding: 2px 7px 0px 7px;*/
height: 35px;
cursor: pointer;
text-align: center;
line-height:35px;
padding: 0 5px 0 5px;
}
div#nav ul li:hover {
background: #232323;
color:#fff;
}
The element with the ID selectedmenu takes CSS #selectedmenu but when hovering it takes div#nav ul li:hover. how can i make it sticks with #selectedmenu
div#nav ul li#selectedmenu:hover {
add your css rules here...
}
Give selectedmenu a higher precedence:
div#nav ul li#selectedmenu {
...
}
just change it every time you hover it, try this:
div#nav ul li #selectedmenu:hover{ /* the style for #selectedmenu*/ }
hope this helps..
Related
I am trying to build a navigation menu. Here are some pieces.
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px transparent;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
What happens is that li element is not tall enough to show the picture.
Any idea how I can increase a height li element so will show the whole picture?
Thanks
I don't think there's a way to make your li stretch dynamically to the size of your background image. You can easily do the reverse however, set a definite height to your li, then set your background to 'contain'. This scales the image down to fit inside your li without clipping.
Updated jsFiddle
css
li {
height:180px;
width:240px;
background-image: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303");
background-size: contain;
background-repeat: no-repeat;
border:1px solid #656565;
display:inline-block;
position:relative;
}
span {
position:absolute;
top:140px;
width:100%;
text-align:center;
background-color:rgba(255, 255, 255, 0.9);
padding:10px 0 10px 0;
border:1px solid #656565;
}
Remove background Property "transparent"
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
<style type="text/css">
body { font-family: sans-serif; }
#main-menu .nav-bar { list-style:none; margin-top: 40px; }
#main-menu .nav-bar li { display:inline; padding:0px 30px; }
#main-menu .nav-bar li a {
height:48px;
width:48px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
text-decoration: none;
padding-left: 25px;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;
position:relative;
}
.nav-bar .nav-button-home a { background:url("commons/imgs/prism/home.png") 0px -0px; }
.nav-bar .nav-button-assets a { background:url("commons/imgs/prism/assets.png") 0px -0px; }
.nav-bar .nav-button-alarms a { background:url("commons/imgs/prism/alarms.jpg") 0px -0px; }
span {
position:absolute;
top:50px;
left:0px;
width:100%;
text-align:left;
padding:10px 0 10px 0;
}
</style>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><span>Home</span></li>
<li class="nav-button-assets"><span>Assets</span></li>
<li class="nav-button-alarms"><span>Alarms</span></li>
</ul>
</nav>
The only problem I have is that text center is not fully aligned with a center of an image.
I am trying to add the dropdown menu for my menu, but it doesnt seem to show when I hover over it. Thanks for the upcoming support.
This is my code in a jfiddle: http://jsfiddle.net/nbh2e15y/2/
the css:
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
and the html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Categories
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>About us</li>
<li>Profile</li>
<li>My Listings</li>
<li>Get Verified!</li>
<li>Log out</li>
<li class="active">
<div id="searchbar">
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>
</div>
If you add
#nav ul>li:hover>ul {
top:initial;
}
to your CSS, then when the li is moused over, the ul will be restored to its original view, so the dropdown will "appear".
When you do this, you'll notice some shifting. Your CSS is in need of some improvement for readability, but this shifting will be because something along the way is not taken out of the flow of the page, but that's another question.
Try this....
CSS code:
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
display:none;
position: absolute;
}
#nav ul li:hover ul{
display:block;
position:absolute;
}
#nav ul ul li a {
color: #fff;
background: #5f6975;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
I have a dropdown menu on my website, and its acting buggy, the dropdown works, but it shifts my whole website when its hovered over.
code pen http://codepen.io/anon/pen/uaFDj
#nav {
}
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
#nav ul>li:hover>ul {
top:initial;
}
my html
<div id="nav">
<ul>
<li>Home</li>
<li>Categories
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>About us</li>
<li>Profile</li>
<li>My Listings</li>
<li>Get Verified!</li>
<li>Log out</li>
<li class="active">
<div id="searchbar">
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>
</div>
it only bugs when its in full screen without ay sidebar stroller. thanks for the upcoming help.
Thank you for the upcoming help and support from everyone.
Without even looking at your code I can tell you why. The width of the dropdown is moving some margin to the right causing the search bar and probably anything else underneath the dropdown to move right.
Just make a <ul> list-style-type: none; with <li> display: inline or block;
Also you're not setting a width to anything but the search bar, which might be another cause.
Try setting a width to your nav.
Hey now just define some css as like this
#nav ul li {
position:relative;
}
#nav ul > li ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
Give max width for #nav and width 100%
#nav{
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
max-width: 858px;
padding: 0;
width: 100%;
}
so that it won't move anymore.
DEMO
why are you giving top:100%;
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; display:none;
}
#nav ul>li:hover>ul {
display:block;
}
UPDATE : to keep a highlighted DEMO
#nav ul li:hover > a{
background-color:#333;
}
I'm trying to create two navigation menus in an HTML document. I am using nav and ul tags. But my CSS is not allowing me to create different appearance for both. One nav will be on the top of the page, the second is on the side. The appearance is taking on the menu within the side.
Here is the relevant section of the HTML:
<div id="navbar">
<nav id="navbar_text">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Services</li>
</ul>
</nav>
</div> <!--END navbar-->
<div id="main-wrap" class="group">
<aside>
<nav id="sidebar">
<ul>
<li>Contact Us</li>
<li>Awards & Articles</li>
<li>Testimonials</li>
<li>Photo Gallery</li>
</ul>
</nav>
Here is my CSS:
#sidebar a:link{
color: #663333;
}
#sidebar a:hover{
color: #dccfbd;
}
#navbar_text a:link{
color: #bca380;
}
#navbar_text a:hover{
color: #dccfbd;
}
#navbar_text{
width: 100%;
float: left;
}
#navbar_text li {
float: left;
list-style: none;
padding: 0;
background: #663333;
margin: 0;
color:#bca380;
}
nav ul li a {
display: block;
padding: 10px 10px 10px 15px;
background: #cab69a;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
margin-top: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: bold;
color: #663333;
text-decoration: none;
-webkit-box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
}
nav ul {
list-style:none;
}
If you want the #navbar_text and the #sidebar navigation menus to be styled differently, you must specify in the CSS specifically how you want each to look.
Therefore, you could use something like...
#navbar_text ul {}
#navbar_text ul li {}
#navbar_text ul li a {}
#navbar_text ul li a:hover {}
#sidebar ul {}
#sidebar ul li {}
#sidebar ul li a {}
#sidebar ul li a:hover {}
Basically, don't be too general by saying...
nav ul li a {}
because that will style both of the menus since they both use those same attributes.
If you are looking for help on the positioning of these two menus as opposed to the appearance, you will have to provide some more information about where they are located currently and where you'd like them to be. But the examples I stated above might help you with position, you just have to be specific in saying that you want the #sidebar menu to be positioned a certain way and the #navbar_text to be positioned a different way.
For example...
#navbar_text ul {
*add position styles here*
}
#sidebar ul {
*add position styles here*
}
try this Demo:
http://jsfiddle.net/pSkua/6/
CSS
body {
margin: 0;
padding: 0;
}
aside {
position: absolute;
right: 0;
}
#slidebar ul {
margin: 0;
padding: 0;
}
#slidebar li {
display: block;
}
#slidebar a {
display: inline-block;
}
#sidebar a:link {
color: #663333;
}
#sidebar a:hover {
color: #dccfbd;
}
#navbar_text a:link {
color: #bca380;
}
#navbar_text a:hover {
color: #dccfbd;
}
#navbar_text {
width: 100%;
margin: 0;
padding: 0;
}
#navbar_text li {
float: left;
list-style: none;
padding: 0;
background: #663333;
margin: 0;
color: #bca380;
}
nav ul li a {
display: block;
padding: 10px 10px 10px 15px;
background: #cab69a;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
margin-top: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: bold;
color: #663333;
text-decoration: none;
-webkit-box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.clr_both{
clear:both;
}
I wanted to create a css dropdown for my blogger blog. But I Faced many difficulties because I am not a CSS professional and my blogger template is not designed by me. I tried many things but nothing worked for me.
I am giving you the code, please identify errors in it. Thanks...
My HTML Structure of Navigation Links:
<div id='mainmenu'>
<ul>
<li class='first current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='http://www.technodoze.com/search/label/Physics' title='Amazing Articles about Physics'>Physics</a></li>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a>
The code for drop down element where problem really is:
<ul>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a></li>
<li><a href='http://www.technodoze.com/2011/09/write-for-us.html' title='Write For Us'>Write For Us</a></li>
</ul>
From here it is normal code:
</li>
<li><a href='http://www.technodoze.com/search/label/Videos' title='Videos'>Videos</a></li>
<li><a href='http://www.technodoze.com/search/label/Downloads' title='Free Downloads'>Download</a></li>
<li><a href='http://www.technodoze.com/search/label/Biggest%20In%20The%20World' title='SG Biggest'>Biggest In The World</a></li>
<li><a href='http://www.technodoze.com/2010/01/author-of-blog.html' title='About Me'>About Me</a></li>
</ul>
</div>
See URL where this navigation linking is applied:
www.technodoze.com
Now my CSS:
#mainmenu a {
text-decoration:none;
display:block;
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover,
#mainmenu li a:focus,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
All is well till here... (The Upper CSS code is Just for the #mainmenu ul li which is infact going fine.)
The problem starts here...
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
I tried to create a drop-down but the child element [ #mainmenu ul li ul ] is not in the form of drop-down and is embedded on the side.
.
(This is currently applied on website you can view it by going to www.technodoze.com and mouseover on Amazing Stuff navigation link.)
I am sure the rare mistake is in the last piece of CSS code but I showed you the whole scenario in case this problem has arisen due to float of #mainmenu ul or any other upper element...
I will be thankful to the person helping me...
Thanks
Updated: 27 sep, 11:00 GMT, Reason: One more problem
I have changed my code now to :
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
#mainmenu ul li ul li a {
background-color:#333333;
}
#mainmenu ul li ul .first_li {
-moz-border-top-left-radius: 7px;
-khtml-border-top-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;
-moz-border-top-right-radius: 7px;
-khtml-border-top-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
#mainmenu ul li ul .last_li {
-moz-border-bottom-left-radius: 7px;
-khtml-border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
-khtml-border-bottom-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
#mainmenu ul li ul {
-moz-box-shadow: 4px 4px 2px #888;
-webkit-box-shadow: 4px 4px 2px #888;
box-shadow: 4px 4px 2px #888;
-khtml-box-shadow: 4px 4px 2px #888;
border-color: #F1F1F1;
-moz-outline-color: #F1F1F1;
}
#mainmenu a {
text-decoration:none;
display:block;
}
#mainmenu a {
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover, #mainmenu li a:hover ul li,
#mainmenu li a:focus, #mainmenu li a:focus ul li, #mainmenu li:hover > a,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu > ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:159px;
left:235px;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
Now the only problem left is that I am getting whitespace in the second order li having address [#mainmenu ul li ul li]
You can see by going to this link www.technodoze.com
Please suggest some solution.
Thanks
Change :
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
TO:
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
And add some new things in :
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:30px; /*new line*/
left:140px; /*new line*/
}
DEMO
Try this Drop down menu http://www.lwis.net/free-css-drop-down-menu/