Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have the following drop down menu: http://jsfiddle.net/fE4YH/
The problem is that the drop-down menu items don't align to the right, they are somewhere in the middle. Is there an easy way to fix this?
Thanks.
I have editted your code..just change text-align:right to float:right;
#nav li ul li
{
font-size:12px;
font-family: 'MankSans-Bold','Trebuchet MS',arial,sans-serif;
text-transform: lowercase;
float:right;
margin-right:0;
padding-right:0;
}
It Seems to Work..
You could change to width:auto from width:12 em here:
#nav li ul {
background: none repeat scroll 0 0 orange;
left: -999em;
position: absolute;
width: auto;
margin-right:-20px;
padding-right:-20px;
}
And add clear:both here:
#nav li ul li
{
font-size:12px;
font-family: 'MankSans-Bold','Trebuchet MS',arial,sans-serif;
text-transform: lowercase;
text-align:right;
margin-right:0;
padding-right:0;
clear:both;
}
And it'll work across browsers.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to build a website but for some reason my a:hover is not working. When I hover nothing happens. I need some help.
My jsfiddle: https://jsfiddle.net/LfaLt1db/
Thank you in Advance!
Because you have .main-content a structure in yor HTML, and .main-content li a in your CSS. Just remove `li
.main-content a:hover, .sub-content a:hover {
text-decoration: underline;
background-color: #008080;
}
Or add
a:hover {
text-decoration: underline;
}
to your CSS file.
change your
.main-content li a:hover, .sub-content li a:hover {
text-decoration: underline;
background-color: #008080;
}
css code to
.main-navbar li:hover, .sub-navbar li:hover {
text-decoration: underline;
background-color: #008080;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to create a horizontal list that isn't precisely aligned, exactly like this: http://i.imgur.com/G8xWymZ.png (horizontal and scattered)
Here's what I've got so far:
HTML
<nav>
<ul id="menu">
<li>Random</li>
<li>Stand</li>
<li><a href="#>NAN</a></li>
<li>Tap</li>
<li>Mart</li>
<li>Dom</li>
</ul>
</nav>
CSS
nav {
position: relative;
top: 25px;
left: 290px;
}
nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
underline: none;
}
nav ul li { display: inline; margin: 0px 20px 0px 0px;}
nav ul li a { color: red; font-size: 14px; text-decoration: none;}
As you can see, although the list is horizontal it is not 'unordered'/scattered as in the image. Any suggestions?
You can position the <li>-elements manually with position: relative and the position properties top, right, bottom, left. I have written a little example for you here: https://jsfiddle.net/c5bw1dbe/
I hope this helps!
This question already has answers here:
wrap anchor tag around li element
(5 answers)
Closed 7 years ago.
In this Index page: http://www.apxhotels.com there are 8 diamonds and hotel names. Instead of text I want element on the image as well as the text. What do I have to change in my CSS to achieve this?
Below is the CSS I am currently using:
.content_menu{
width:1210px;
float:left;
position:absolute;
top:-87px
height:96px;
z-index:10
}
.content_menu ul li{
margin-right:20px;
background:url(../images/menu_down.png);
width:113px;
height:96px;
display:inline-block;
text-align:center;
}
.content_menu ul li a:hover{
color:#939598;
}
.content_menu ul li a{
font-family: Cambria;
color:#fff;
font-size:14px;
text-align:center;
position:relative;
top:46px;
}
.content_menu ul li:last-child{
margin-right:0px;
}
.content_menu ul{
margin-left:0px;
}
Quickfix
Add the following css declarations to your stylesheet's definitions:
.content_menu ul li a {
...
line-height: 89px; /* height of parent <li> minus padding-top of this link */
display: block;
padding-top: 7px; /* instead of 46px as currently defined in your css */
}
and remove those two from the same ruleset:
position: relative;
top: 46px;
This will do two things: First setting display: block; makes sure your link grab the full with of the surrounding <li>, expanding the horizontally clickable area. Then you make the link just as high as the list item by setting the lineheight accordingly. Done!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have my navigation in a <ul> and the <li> are floated.
CSS
ul#nav {
float:right;
margin:10;
font-family: 'Open Sans', sans-serif;
}
ul#nav li {
float:left;
margin:10;
width:127px;
font-size:15px;
}
ul#nav a{
margin:0px;
width:100%;
height:100%;
text-decoration:none;
background:transparent;
color:rgb(46,43,52);
}
Currently I get this:
Yellow = desired position | Red = actual position
How can I position the list items with a smaller height on the bottom line?
With your CSS, it makes it clear what you are trying to achieve.
Remove the float and position your list items with display: inline-block. Inline elements will all position themselves next to each other. (Read more about different display options here)
vertical-align: bottom is used to keep your items positioned at the bottom of the line.
#nav { font-size: 0 } fixes a gap that occurs with inline elements. You will have to set your font-size on #nav li or #nav li a (Read more about that gap problem here)
To give the list items after the first list item a different height, I have used #nav li + li which will target every <li> that has a <li> before it.
Here is a visual example of different vertical alignments:
Here is an example of the below.
HTML
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
#nav {
font-size: 0;
}
#nav li {
list-style: none;
width:127px;
height: 100px;
background: #F00;
margin: 10px;
display: inline-block;
vertical-align: bottom;
}
#nav li + li {
height: 50px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a nav list. I want the lighter gray area to be clickable as a link as opposed to just the text. The source is:
http://mattcdecker.comeze.com/HELP/
<nav>
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav{
float:right;
}
nav li{
float:left;
text-transform:uppercase;
font-size:24px;
background:#333;
margin:70px 10px 0 10px;
padding:10px;
}
nav a{
color:#666;
}
nav a:hover{
color:#fff;
}
Please post code, not a link.
You need to move the padding from the list element to the anchor, and also add display:block to the anchor.
nav li {
float: left;
text-transform: uppercase;
font-size: 24px;
background: #333;
margin: 70px 10px 0 10px;
padding: 0;
}
nav a {
color: #666;
display: block;
padding: 10px;
}
The issue you have is that your nav HTML is malformed so won't display properly.
<nav>
<!-- ^ this probably doesn't belong here -->
<ul>
<!-- ^ this certainly doesn't belong here -->