I need to indent the second row of text on this dropdown navigation menu. The issue is that I usually do it with a combination of padding and negative text-ident value. But this menu uses the padding for the color on the left. I need to keep all of this styling and look, but need text indent. There is a sample longer row under the "Home" button.
http://jsfiddle.net/trevoray/VZ7qD/20/
Any help would be greatly appreciated.
Thanks!
Trevor
.nav li > ul > li {
margin-bottom: 2px;
background: #0f2992;
padding-left: 20px;
border: #0f2992 solid 1px;
}
.nav li > ul > li > a{
padding:5px 3px 5px 10px;
text-indent:-7px;
}
or just throw a class on all indented ul's
#navMenu ul.indentedNav {margin-left:20px;}
Related
My page is https://visiapera.wordpress.com/ . I have been trying to make some changes in my drop-down menu but it does not seem to work.
I am trying to replace the red color when the mouse is over with white and just underline the word.
Then even though I make the text-align to left it does not align it to the left side of the main title. I will appreciate any suggestions...
.main-menu ul a {
text-align: left;
width: 170px;
padding-left: 8%;
padding-right: 0;
margin-left: 15%;
border-top: 1px;
border-bottom: 1px;
border-left: 0;
border-right: 0;
background-color: rgba(255,255,255,0.6);
}
In detail:
If you go to the drop-down menu of the "design" title you will see that it is not aligned to the actual title (meaning the "design").
Then when the mouse goes over the drop-down menu it turns red and I do not want to have that (I only want it to be white).
I hope it is clear now as it is not possible to upload any photo...:(
To get the hover effect that you want:
You should change:
.main-menu ul a:hover {
background: #ca2017 none repeat scroll 0 0;
border-color: #ca2017;
color: #fff;
}
to something like:
.main-menu ul a:hover {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: black;
background-color: #fff;
}
You may also want to remove the border radius from:
.main-menu > li > a, .main-menu ul > li:first-child > a, and .main-menu ul > li:last-child > a
Your sub menu alignment issue is a bit of a mess.
Your problems are from the negative left margins and the left positioning listed below (change them all to "0"):
.main-menu ul {margin-left: -110px; /* change to 0 */}
.main-menu ul a {margin-left: 15%; /* change to 0 */}
.main-menu > li:hover > ul {left: 50%; /* change to 0 */}
To correct 3rd level sub menu alignment:
Update the margin-left on your 3rd level menus to match the width of your 2nd level dropdown plus the additional space for the css arrow. It is currently 235px and should be 180px.
.main-menu ul ul {margin-left: 180px; /* 170px ( width of .main-menu ul a) + 10px (CSS Arrow - .main-menu ul ul::after {left:-10px})}
Here is example http://jsfiddle.net/x9ghnf99/7/
Have ul li menu
<div class="nav" id="nav1">
<ul>
<li>Home</li>
</ul>
</div>
Set initial background color for li. Also set some padding from text (a) to "borders" of li. And also want to create rounded corners
#nav1 ul li {
display: inline;
background-color: #dddddd;
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
}
On hoover want to change/replace color, for example to green, so as green fills whole li
With this http://jsfiddle.net/psxvy320/
#nav1 ul li :hover{
background-color: green;
}
green is only around text (a) and for other part of li i see previous background.
Tried http://jsfiddle.net/psxvy320/1/
#nav1 ul li :hover{
background-color: green;
padding: 5px 5px 5px 5px;
}
See part of previous background and li expands to left and right.
I want to see li the same widht/height, want only to change background, like here http://jsfiddle.net/psxvy320/4/ (below menu)
What need to change/add to the code?
There is a space between li and :hover in your code.
It should be .nav ul li:hover. When you add a space li :hover, it adds the hover effect to the child element (in this case, to the <a>)
Fiddle1: http://jsfiddle.net/psxvy320/5/
Fiddle2: http://jsfiddle.net/x9ghnf99/10/
Add the padding for a instead of li so that the whole item will be clickable. and change li display to inline-block
#nav1 ul li a{
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
display: block;
}
.nav ul li {
display: inline-block;
}
http://jsfiddle.net/afelixj/x9ghnf99/11/
I got a problem with my menu. The last li element is not on the same line as the others. The last li contains a div, the other 3 contains anchor tags. I mean, it's basically on the same line, but the last looks like it's having a margin-top: 1px or something. But it don't have that.
Without more code this can be difficult, but from the image link you provided here is the code to achieve you required output:
ul {
list-style: none;
}
/*This is probably what was causing your miss-alignment*/
ul li {
display: inline-block;
border: 1px solid #808080;
border-radius:5px;
padding: 10px 50px;
}
<div>
<ul>
<li><a>a1</a></li>
<li><a>a2</a></li>
<li><a>a3</a></li>
<li><div>div</div></li>
</ul>
</div>
Another possibility is that you are adding margin to all div or same-class elements by mistake.
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
I'm having problems getting a menu center aligned.
Tried settings nav and wrap-nav class to
margin 0 auto; width: 100%;
but still cannot get it working, so have reverted that back for my example linked below.
I've created a jsfiddle page to show me menu as it is now.
As you can see it sits over to the left, I would like to get this centered.
http://jsfiddle.net/x6vLep9g/
If anyone can help it would be much appreciated, thanks.
I managed to center using the following:
.menu ul {
display:inline-block;
}
.menucentre {
text-align:center;
}
DEMO
Did 2 things:
1) Added "text-align: center;" to ".menu ul"
.menu ul {list-style: none;margin: 0;padding: 0; text-align: center; }
2) Removed float from ".menu ul li" & added display inline block.
.menu ul li {position: relative; display:inline-block; background-color: #333;padding: 6px 5px 0px 5px; margin: 17px;}
enter link description hereCenter it like this
change nav style to:
nav {margin:15px 0px;text-align: center;}
and also add display:inline-block to .menu ul
.menu ul {list-style: none;margin: 0;padding: 0;display:inline-block}
fiddle