HTML CSS UL menu styling

horizontal menu bar in html
css menu examples
responsive navigation menu css
vertical menu css
horizontal list css
dropdown menu css
list-style-type
css list-style examples

Small question on how to achieve some styling on a HTML / CSS UL menu.

I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:

http://jsfiddle.net/WMQqt/

(HTML)

<ul id="nav">
    <li><a href="#">CONTACT US</a>
    </li>
    <li><a href="#">HOME</a>
    </li>
</ul>

(CSS)

#nav {
    list-style: none;
    margin-bottom: 10px;
    */ margin-top: -6px;
    position: relative;
    right: 286px;
    z-index: 9;
    height: 26px;
    padding: 4px 4px 4px 4px;
    font-weight: bold;
}
    #nav li {
    float: right;
    margin-right: 10px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #444444;
    background: #fff;
    text-decoration: none;
    border: 1px solid grey;
}

#nav a:hover {
    color: #fff;
    background: #04B431;
}

I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.

Similar to how this looks:

http://jsfiddle.net/6PY7z/

Can this be done using the UL menu method?

Thanks for any advice, I'm no expert with HTML / CSS.

Add margin to a tag and move border to li

#nav li
{
    float: right;
    margin-right: 10px;

    border: 1px solid grey;
}

    #nav a
    {
        display: block;
        padding: 5px;
        color: #444444;
        background: #ccc;
        text-decoration: none;
        margin:3px;    
    }

DEMO

A horizontal list menu, In this example, we use CSS to style the list horizontally, to create a navigation menu: Home; News; Contact; About. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more HTML CSS UL menu styling

you can use the following styles to achieve what you want:

#nav li
{
    float: right;
    margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}

#nav a
{
    display: block;
    padding: 5px;
    color: #444444;
    background: #d8d8d8; /*new background-color*/
    text-decoration: none;  
    border: 3px solid white; /*add white padding here*/
}

http://jsfiddle.net/WMQqt/4/

CSS Styling Lists, HTML Lists and CSS List Properties. In HTML, there are two main types of lists: unordered lists (<ul>) - the list items are marked with bullets; ordered lists (<ol>)  In this tutorial we're going to create a professional horizontal CSS menu. First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal navigation menu like in Picture 1.

ok

in html go

<dl><div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
</dl>

in css

dl { display: flex;
flex-direction: column;}

some hints...

dt float left AND dd float right

HTML CSS UL menu styling, Add margin to a tag and move border to li #nav li { float: right; margin-right: 10px; border: 1px solid grey; } #nav a { display: block; padding: 5px;  How to Create Menu with SubMenu using CSS/HTML This article will cover the creating of a CSS menu using the HTML Div tags. It will demonstrate the functionality by giving some examples on to play with different types of menus.

Introduction to styling an unordered <ul> list as a menu, Most of the styling to change the appearance is applied to the links The CSS. The HTML for the list: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>  The CSS property for styling the marker type is list-style-type. The default list-style-type value for an ordered list is decimal, whereas the default for an unordered list is disc. Ordered list example: /* css */ ol { list-style-type: upper-roman; } Unordered list example: /* css */ ul { list-style-type: square; } No marker example:

WebD2: Stylizing a Navigation Menu with CSS, you will be able to use a variety of CSS properties to make an unordered list look like a navigation menu. Activities. Open your portfolio's external style sheet in a  /*Strip the ul of padding and list styling*/ ul { list-style-type:none; margin:0; padding:0; position: absolute; } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px; } The following attributes are almost exclusively for aesthetic appeal.

Solved with CSS! Dropdown Menus, By styling ul li ul , we have access to that submenu, and by styling ul li ul li , we have access to the individual list items within it. The Problem. This  list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed) list-style-position (specifies whether the list-item markers should appear inside or outside the content flow) list-style-image (specifies an image as the list item marker)

Comments
  • Just apply border to LI and background to A (as you did with DIVs).
  • Thank you very much - I am still learning and fail to spot these things sometimes. Appreciate the explanation.
  • @Harry u r welcme and all the best
  • The description list <dl> tag has a different semantic meaning than the <ul> tag. These should not be used interchangeably and you do not explain in your answer why you recommend a <dl>, not how it would solve OP's question.