在Web開發中，導航欄是一個重要的組成部分，在頁面中起到了非常重要的作用。有時我們需要拖動導航欄，這時候用到的就是CSS的拖放效果。
首先，在HTML中創建一個包含導航欄的容器，如下所示：

<div id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">服務項目</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

然后，在CSS中為導航欄容器添加拖放效果的樣式，如下所示：

#nav {
width: 800px;
height: 50px;
background-color: #f2f2f2;
margin: 20px auto;
border: 2px solid #333;
cursor: move; /* 添加拖動效果 */
}

最后，我們需要使用JavaScript為導航欄添加拖動效果的事件處理程序，如下所示：

var nav = document.getElementById("nav");
var isDown = false;
var startX;
var startY;
nav.addEventListener("mousedown", function (e) {
isDown = true;
startX = e.clientX - nav.offsetLeft;
startY = e.clientY - nav.offsetTop;
nav.style.cursor = "grabbing";
});
nav.addEventListener("mouseup", function () {
isDown = false;
nav.style.cursor = "move";
});
nav.addEventListener("mousemove", function (e) {
if (!isDown) return;
e.preventDefault();
var x = e.clientX - startX;
var y = e.clientY - startY;
nav.style.left = x + "px";
nav.style.top = y + "px";
});

以上就是CSS拖動導航欄的示例。通過添加拖動效果的樣式和事件處理程序，可以使得我們的導航欄變得更加靈活和實用。