Apply a border line to the menu list items

I have a menu and I'd like to add a left border, but I want it to look a certain way. Currently, the border spans the full height of the li element and I don't want it to appear on submenus.

Example: aunipark.in

Here is my code :

HTML

<div class="menudiv">
<div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                        <ul>
                        <li><a href="#">School</a></li>
                        <li><a href="#">Vision and Mission </a></li>
                        <li><a href="#">Principal’s desk</a>
                        <li><a href="#">Management</a>
                        </ul> </li>
                <li><a href="#">Admission</a>
                        <ul>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Download application form</a></li>
                        </ul> </li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">School Calander</a></li>
                <li><a href="#">News & Events</a></li>
                <li><a href="#">Career</a></li>
                <li><a href="#">Contact</a></li>               
            </ul>
        </div>
</div>

CSS

.menudiv
{

    width:980px;
}


.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;



}

.menu ul ul {
        display: none;

    }

.menu ul li:hover > ul {
        display: block;

}

.menu ul {
    background: #111312;
    margin: 0;
    list-style: none;
    position: relative;
    padding: 0;
    border:3px solid #111312;
-moz-border-radius: 3px;
    -webkit-border-radius: 3px;

}
.menu ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

.menu ul li {
    float: left;
    border-bottom: 3px solid transparent;
}
.menu ul li:hover {
    background: #111312;
    border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
    color: #fff;
}

.menu ul li a {
    display: block; 
    padding: 15px;  
    border-right: 3px solid #fff;
    color: #fff; 
    text-decoration: none;
}

.menu ul ul {
    background: #111312;
    padding: 0;
    position: absolute; 
    top: 100%;
}
.menu ul ul li {
    float: none; 
    position: relative;
}
.menu ul ul li a {
    padding: 10px;
    color:#000;
    display: block; 
}   
.menu ul ul li a:hover {
    background: #111312;
    color: #fff;
}

.menu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
    padding: 0;
}

.menu ul ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid pink; 
    position: relative;
}

.menu ul ul ul li a { 
    padding: 10px;
    color: #fff;
    display: block; 
}

.menu ul ul ul li a:hover {
  background: #95CEF1;
  color: #000;
}

.menu ul ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

.head
{
   width:500px;
    height:200px;
    background:#789;
}

.foot
{
   width:500px;
    height:200px;
    background:#123;
}

Also check out the fiddle: jsfiddle.net/p7Nsf/9/

htmlcss

Answer №1

Check out this HTML style test...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CSS Style Sample</title>
<style type="text/css">
#list { background-color: aqua; }
.horizontal { display: inline; border-left: 2px solid; padding-left: 0.3em; }
.first { border-left: none; padding-left: 0; }
</style>
</head>
<body>
<div id="list">
<div>
<ul>
  <li class="first"><a href="#">Home</a></li>
    <li class="horizontal"><a href="#">About</a>
                    <ul>
                    <li class="first"><a href="#">School</a></li>
                    <li class="horizontal"><a href="#">Vision and Mission </a></li>
                    <li class="horizontal"><a href="#">Principal’s desk</a>
                    <li class="horizontal"><a href="#">Management</a>
                    </ul> </li>
            <li class="horizontal"><a href="#">Admission</a>
                    <ul>
                    <li class="first"><a href="#">Overview</a></li>
                    <li class="horizontal"><a href="#">Download application form</a></li>
                    </ul> </li>
            <li class="horizontal"><a href="#">Gallery</a></li>
            <li class="horizontal"><a href="#">School Calendar</a></li>
            <li class="horizontal"><a href="#">News & Events</a></li>
            <li class="horizontal"><a href="#">Career</a></li>
            <li class="horizontal"><a href="#">Contact</a></li>               
        </ul>
    </div>
</div>
</body>
</html>

Answer №2

To add padding to the top and bottom of the anchor, apply it to the li element instead. Additionally, give the anchor a right border:

.menu > ul > li > a {
    border-right: 2px solid white;
    display: block;
    padding-left: 25px;
    padding-right: 25px;
}
.menu > ul > li:last-child > a {
    border-right: 0;
}

For more information, click here.

Answer №3

Here is an example:

Check out the demo

CSS code snippet:

.menudiv {
    width: 788px;
    margin:0 auto;
}
.menu {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

/* Rest of CSS code omitted for brevity */

Answer №4

In every instance, the border will match the height of the element; however, you have the ability to create a line and implement it across all elements by using this code:

 background:url(line.png) bottom right no-repeat;

Answer №5

This tip could come in handy - I often manage border lines in navigation using the "line-height" property, as it gives you control over the height of borders on the left or right sides. Essentially, you can adjust the height of a left/right border by changing the "line-height" property.

HTML

<div class="wrapper">
    <div class="container">
        <ul class="nav">
            <li><a href="#">My Wishlist</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">My Cart</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</div>

CSS

.wrapper{
    background: #f1f1f1;
    width: 100%;
    border-top: 5px solid #d1b792;
    border-bottom: 5px solid #d1b792;
    padding-bottom: 1px;
}
.nav li{
    display: inline-block;
    margin-left: -4px;
}
.nav li a{
    display: block;
    font-size: 18px;
    padding: 0px 12px 3px 12px;
    margin: 5px 0;
    color: #666694;
    line-height: 12px;
    border-right: 2px solid #4679BD;
    text-decoration: none;
}
.nav li a:hover{
    color: darkblue;
}
.nav li:last-child a{
    border-right: none;
}

Check out the Fiddle here: http://jsfiddle.net/johannesMt/Lt143z8x/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding text outside of a HTML tag with jsoup

I am working with the following HTML code: Data <div class="alg"></div> <div class="alg"></div> Pepsi 791 <div class="alg"></div> <div class="alg"></ ...

htmljsoup

What is the reason behind Google Font's decision to preconnect to fonts.googleapis.com?

I've been looking to incorporate the Quicksand Font into my website, and Google suggested adding the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="h ...

htmlwebgoogle-font-api

Obtain the position of the click

My goal is to generate a 2dgrid with dimensions xMax = 10, yMax = 6 that looks like the following: x 0 1 2 3 4 5 6 7 8 9 _ _ _ _ _ _ _ _ _ _ y |_|_|_|_|_|_|_|_|_|_| 0 |_|_|_|_|_|_|_|_|_|_| 1 |_|_|_|_|_|_|_|_|_|_| 2 |_|_|_|_|_|_|_|_|_|_| 3 |_|_|_|_|_|_|_ ...

javascriptjqueryhtmlcss

Disabling a checkbox within an onClick event handler

I'm facing an issue where I have a checkbox with the type "checkbox" and I'm using JAWS to read it. The problem is that in IE11, JAWS reads a disabled checked checkbox as unchecked, which I believe is a bug in IE. To work around this, I need to r ...

javascripthtmlcheckbox

Is there a way for me to determine the quality of a video and learn how to adjust it?

(function(){ var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, })(); var bitrates = player.getBitrateInfoListFor("vid ...

javascripthtmlmpeg-dashdash.js

CSS - Safari has trouble properly implementing clip-path

I'm currently working on a shape-based menu, but I'm encountering issues specifically in Safari. The layout gets distorted in Safari, and I'm struggling to understand the cause. Interestingly, when I use CSS clip-path without the SVG tag, it ...

htmlcsscross-browsercss-shapes

How to Align Pictures in an Unordered List

I'm having trouble centering these images within the UL element. Despite researching solutions from other sources, I can't seem to apply them successfully in my specific case. Any assistance would be greatly appreciated. Thank you. JSFiddle: htt ...

htmlcss

Tips for aligning multiple apex pie charts side by side

I am currently utilizing ReactApexChart to display pie charts in a React application. I am trying to have four pie charts aligned horizontally within a single div, but by default, the charts are displayed vertically with each chart in its own separate di ...

cssreactjsapexcharts

Unlocking new perspectives with a click

Currently exploring Angular development, I have encountered a question here but couldn't find the solution I was looking for. I am seeking suggestions and ideas on how to approach this issue. Essentially, my HTML includes buttons like the ones shown ...

htmlcssangulartypescript

Adjust the height and width dynamically in CSS/HTML based on various screen dimensions

There are 2 major concerns I have regarding this layout : .feature_content (with a grey background) does not adjust its height and width to different screen sizes. Currently, on large screens, .feature_content is positioned far from the footer. There is ...

htmlcss

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

javascriptjquerycsshtml

Manipulate the child elements within a list by altering their IDs with jQuery

I'm currently using jQuery to dynamically add options to a select tag from a dictionary. I now need to set the title attribute of each option based on the keys in the dictionary. Can anyone suggest a solution for this? JQuery function addOptions(){ ...

javascripthtmljquery

Triggering a sweet alert on a mouse click

Here is a code snippet I found on . It shows an alert box that doesn't disappear when clicked outside of it. swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, ...

javascriptjqueryhtmlsweetalert

The Street View feature on Google Maps API is now showcasing a cool,

I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality s ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Definition list with alternating left and right alignments

Here is a definition list with a specific styling: dl { margin: 0; } dl.interview dt { color: #A8A67A; } dl.interview dd { margin-left: 0; } .interview dt:before { content: 'Q. '; } .interview dd:before { content: 'A. ...

csshtml-lists

Aligning text beneath a positioned span element

I have a code snippet where I am trying to center a number within a div and then center the units right below the number. The number is centered correctly, but the units are not aligning as desired. How can I achieve this layout? div.div1 { height: 20 ...

htmlcss

Comparing Traditional Tables to Div Tables

Is this process: <table> <tr> <td>Hello</td> <td>World</td> </tr> </table> Achievable with the following code? <div> <div style="display: table-row;"> <di ...

cssperformancehtmlhtml-table

The functionality to Toggle submenus within a navigation menu using jQuery is not performing as anticipated

I implemented a horizontal menu using CSS, HTML, and jQuery. Clicking on a menu item displays a sub-menu. The issue I'm facing is that when one submenu is open and I click on another menu item, the new submenu opens but doesn't hide the previous ...

htmljquerycss

Using Javascript to select a radio button in a form depending on the value entered in a text box

I have a form that interacts with a Google Sheet to insert and retrieve data. For instance, the form contains two radio buttons: <input id="Rdio_1" name="RdioSelect" type="radio" class="FirstCheck" value="1" onchange="RadioValInsert ()"/> < ...

javascripthtml

The toggle feature in jQuery doesn't hide content in the same manner as it was originally shown

Just diving into the world of jquery and I'm experimenting with the toggle function to display and hide a div, along with adding or removing an active class. http://jsfiddle.net/MAkyw/ I've encountered 2 issues: 1) The 'active' class ...

jqueryhtmlcss